<template>
  <div class="personlMsg-container">
    <div class="personal">
      <div class="header-pic">
        <div class="img-box">
          <!-- 这里的头像需要从后端发出请求获取图片地址-->
          <img src="../../../assets/szptImages/images/builderHeader.png" alt="">
        </div>
      </div>
      <div class="person-msg">
        <!-- 用户基本信息 -->
        <form action="" @submit.prevent="saveMsg()">
          <div class="user-input-list">
            <!-- 用户id系统生成不可改变 -->
               ID:<div class="input_list">
                 <span>{{userInputMsg.userID}}</span>
                 </div>
          </div>
          <div class="user-input-list">
            <!-- 用户名字用户可修改 -->
            <div v-if="listType">
              昵称:<div class="input_list">
                  {{ userInputMsg.name }}
                  </div>
            </div>
            <div v-else>
              昵称: <div class="input_list">
                    <el-input v-model="userInputMsg.name" placeholder="请输入内容"></el-input>
                    </div> 
            </div>
          </div>
          <div class="user-input-list">
            <!-- 用户性别用户可修改-->
            <div v-if="listType">
              性别: <div class="input_list">
                    <span>{{userInputMsg.sex}}</span>
                    </div> 
            </div>
            <div v-else>
              性别: <div class="input_list">
                <el-radio-group v-model="userInputMsg.sex">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                  <el-radio label="保密">保密</el-radio>
                </el-radio-group>
                   </div> 
            </div>
          </div>
          <!-- <div class="user-input-list">
            <div v-if="listType">
              学校:<div class="input_list">
                  {{ userInputMsg.school }}
                  </div>
            </div>
            <div v-else>
              学校: <div class="input_list">
                    <el-input v-model="userInputMsg.school" placeholder="请输入内容"></el-input>
                    </div> 
            </div>
          </div> -->
          <div class="user-input-list">
            <!-- 用户学号用户可修改 -->
            <div v-if="listType">
               个性签名:<div class="input_list">
                  {{ userInputMsg.remarkData}}
                  </div>
            </div>
            <div v-else>
              个性签名: <div class="input_list">
                    <el-input v-model="userInputMsg.remarkData" maxlength="40" placeholder="请输入内容"></el-input>
                    </div> 
            </div>
          </div>
        </form>
        <div class="edit_update">
          <div class="btn">
            <el-button type="primary" @click="reviseData()" ref="edit">{{ bottonText }}</el-button>
            <el-button type="primary" v-show="!listType" @click="saveMsg()">保存</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'personalMsg',
    data() {
      return {
        // 用户是否修改
        listType:true,
        // 用户输入信息
        userInputMsg:{
        // 输入状态标记
        inputFlag:true,
        // 用户ID
        userID:'',
        // 用户昵称
        name:'',
        namePass:'',
        // 用户性别
        sex:'',
        sexPass:'',
        // 个性签名
        remarkData:'',
        remarkDataPass:'',
        // 用户学校
        school:'广东药科大学',
        schoolPass:'',
        },
        // 修改按钮的文字
        bottonText:'修改',
        
      }
    },
    computed: {
      UserDataMsg(){
        return this.$store.getters['userData/getUserDataMsg']
      }
    },
    methods: {
      reviseData(){
        // 点击修后会记录当前输入框的内容，修改=>取消,再次点击后取消修改
        if (this.userInputMsg.inputFlag) {
          // 当用户执行修改操作记录取消之前的值
          this.userInputMsg.namePass=this.userInputMsg.name;
          this.userInputMsg.sexPass=this.userInputMsg.sex;
          this.userInputMsg.remarkDataPass=this.UserDataMsg.data.remark;
          // this.userInputMsg.schoolPass=this.userInputMsg.school;
        }else{
          // 当用户执行取消操作
          this.userInputMsg.name=this.userInputMsg.namePass;
          this.userInputMsg.sex=this.userInputMsg.sexPass;  
          this.userInputMsg.remarkData=this.userInputMsg.remarkDataPass;
          // this.userInputMsg.school=this.userInputMsg.schoolPass;
        }
        this.userInputMsg.inputFlag=!this.userInputMsg.inputFlag;
        this.listType=!this.listType;
        this.bottonText=!this.listType ? '取消' :'修改'
      },
      saveMsg(){
        // 保存用户信息
        console.log("用户提交了信息",this.userInputMsg);
        // 在这里执行一系列的用户信息判断操作
        this.listType=true;
        this.bottonText='修改';
      },
      setUserMsg(){
        let userMsg = JSON.parse(window.sessionStorage.getItem('userMsg'))
        console.log("测试",this.$store.getters['userData/getUserDataMsg']);
      },
      /**
       * @description 初始化用户个人信息
       */
      init_userData(){
        this.userInputMsg.userID=this.UserDataMsg.data.userId;
        this.userInputMsg.name=this.UserDataMsg.data.nickName;
        this.userInputMsg.sex=this.judgeSex(this.UserDataMsg.data.sex);
        this.userInputMsg.remark=this.UserDataMsg.data.remark;
      },
      judgeSex(sexCode){
        if (sexCode==='1') {
          return '男'
        }else if (sexCode ==='0') {
          return '女'
        }else {
          return '保密'
        }
      }
    },
    created() {
      // 修正个人信息
      this.setUserMsg();
      this.init_userData()
      console.log("#####",this.UserDataMsg);
    },

}
</script>

<style scoped>
.personlMsg-container{
  width: 100%;
  height: 720px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffff;
}
.personal{
  width: 500px;
  height: auto;
  padding-bottom: 10px;
  border-radius: 10px;
  background-color: white;
 
}
.header-pic{
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-box{
  width: 150px;
  height: 150px;
  border-radius: 75px;
  overflow: hidden;
  background-color:transparent;
}
.img-box img{
  width: 100%;
  height: 100%;
}
.person-msg{
  width: 100%;
  height: 400px;
  margin-top: 60px;

}
.user-input-list,
.userId{
  width: 100%;
  height: auto;
  min-height: 50px;
  line-height: 50px;
  background-color: transparent;
  padding-left: 20px;
  color: #666;
  font-weight: bold;
  border-bottom: 1px solid rgb(232, 231, 231);
}
.edit_update{
  width: 100%;
  height: 40px;
  display: flex;
  margin-top: 30px;
  justify-content: center;
}
.input_list{
  margin-left: 20px;
  display: inline-block;
}
.btn .el-button{
  width: 120px;
}
</style>